const ol = require("ol3-debug");
const Tile = require("../Tile");
const React = require("react");
require("../layers/ImageTransform2");

ol.layer.CollectionLayer = function(options){
    ol.layer.Layer.call(this,  (options||{}));
}
ol.inherits(ol.layer.CollectionLayer, ol.layer.Layer);

ol.layer.CollectionLayer.prototype.getSource;
ol.layer.CollectionLayer.prototype.add = function(image){
    this.get("map").addLayer(image);
}

var fun = ol.renderer.canvas.Map.prototype.createLayerRenderer;
ol.renderer.canvas.Map.prototype.createLayerRenderer = function(layer){
    if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
        return new ol.renderer.canvas.ImageLayer(layer);
    } else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
        return new ol.renderer.canvas.TileLayer(layer);
    } else if (ol.ENABLE_VECTOR_TILE && layer instanceof ol.layer.VectorTile) {
        return new ol.renderer.canvas.VectorTileLayer(layer);
    } else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
        return new ol.renderer.canvas.VectorLayer(layer);
    } else if(ol.ENABLE_IMAGE && layer instanceof ol.layer.CollectionLayer){
        return new ol.renderer.canvas.Layer(layer);
    }else {
        ol.DEBUG && console.assert(false, 'unexpected layer configuration');
        return null;
    }
}


const InitPage = React.createClass({

    componentDidMount(){
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([116,41]),
                zoom: 4
            })
        });

        var layer = new ol.layer.CollectionLayer({
            map: map
        });
        map.addLayer(layer);

        var wkt = "POLYGON((115.707 40.2429,116.132 40.159,116.024 39.8428,115.602 39.9264,115.707 40.2429))";
        var format = new ol.format.WKT();
        var feature = format.readFeature(wkt, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
        });

        layer.add(new ol.layer.Image({
            source: new ol.source.ImageTransform({
                url: "../data/GF1_PMS1_E115.8_N40.0_20130627_L1A0000177393-PAN1/GF1_PMS1_E115.8_N40.0_20130627_L1A0000177393-PAN1.jpg",
                crossOrigin: '',
                projection: "EPSG:3857",
                imageExtent: feature.getGeometry().getExtent(),
                targetPolygon: feature.getGeometry(),
                direction: ol.source.ImageTransform.DIRECTION.RIGHT_UP
            })
        }));
    },

    render(){
        return (
            <div className="container">
                <Tile header="初始化">
                    <div id="map">

                    </div>
                </Tile>
            </div>
        );
    }
});

module.exports = InitPage;